<template>
  <div class="full-width d-flex-c">
    <div
      class="panel-title-bg flex-between"
    >
      <div
        class="flex-ai-c panel-title"
        :class="{'active':visibleLayerId===layerId}"
        @click="changeLayerVisible(layerId)"
      >
        <i class="ri-map-pin-5-fill  m-r-7 f-20" />
        <div class="panel-title-text flex-0 m-r-s">
          墒情站<span>({{ sqTotal }})</span>
        </div>
      </div>

      <div class="flex-ai-c">
        <BKSelect
          v-model="searchForm.BSNM"
          placeholder="流域分区"
          size="mini"
          clearable
          :mock="watershedZones"
          class="blue-select m-r-mini"
          popper-class="blue-select-dropdown"
        />
        <el-cascader
          v-model="searchForm.ADDVCD"
          class="blue-select"
          placeholder="行政区域"
          :options="adminAreas"
          popper-class="blue-select-dropdown"
          :props="{ checkStrictly: true }"
          :show-all-levels="false"
          filterable
          clearable
        />
      </div>
    </div>
    <div class="d-flex-c panel-box-outline full-width flex-1">
      <div class="flex-1 panel-table">
        <ConfigGrid
          ref="soilGrid"
          class="ysqxx-table"
          border="none"
          :stripe="false"
          :has-seq="false"
          :has-toolbar-left="false"
          :highlight-current-row="true"
          :has-pager="false"
          :has-add="false"
          :has-batch-remove="false"
          :has-checkbox="false"
          :toolbar-config="null"
          :configs="configs"
          :pager-config="pagerConfig"
          :after-query="afterQuery"
          @current-change="currentChange"
        />
      </div>
      <div class="flex-0 overflow-hidden panel-chart">
        <BKChart
          :option="chartOption"
          @click="handleClickChart"
        />
      </div>
    </div>
    <SwswModal ref="sqModal" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getBarOption, maxBarWidth } from '@/components/chart/echart-utils'
import { nextTick } from '@vue/composition-api'
import { sqLayerId } from '../../variable'
import SwswModal from '../../components/business/swsw-modal.vue'

export default {
  name: 'YsqxxSoilMoisture',
  components: { SwswModal },
  data () {
    return {
      chartOption: null,
      stageList: [],
      contrastStage: '',
      searchForm: {
        ADDVCD: ['130000'],
        BSNM: ''
      },
      configs: {
        isView: false,
        noOperation: true,
        noParentParam: true,
        appId: 'YSJC',
        bzCode: 'YSJC',
        metaSet: 'YSQJC_ST_STBPRP_B_SQZ',
        gridMethod: 'SWSW_GetList',
        defaultQueryParamsProcessor: this.sqDefaultQueryParamsProcessor

      },
      pagerConfig: {
        layouts: ['PrevPage', 'Jump', 'PageCount', 'NextPage', 'Total'],
        pagerCount: 4
      },
      layerId: sqLayerId,
      sqTotal: 0
    }
  },
  watch: {
    searchForm: {
      deep: true,
      handler (v) {
        this.$store.commit('ysqxx/setMapStationQueryParam', {
          SQADDVCD: v.ADDVCD.length ? v.ADDVCD[v.ADDVCD.length - 1] : '130000',
          SQBSNM: v.BSNM
        })
        this.$root.$emit('mapStationPointSearch')
        nextTick(async () => {
          this.$refs.soilGrid.refreshList({
            BSNM: this.searchForm.BSNM,
            ADDVCD: this.searchForm.ADDVCD.length ? this.searchForm.ADDVCD[this.searchForm.ADDVCD.length - 1] : '130100'
          })
          await this.setChartOption()
        })
      }
    }
  },
  computed: {
    ...mapState('ysqxx', ['adminAreas', 'watershedZones', 'visibleLayerId'])
  },
  created () {
    this.$root.$on('clearOtherActiveRow', this.clearOtherActiveRow)
  },
  beforeDestroy () {
    this.$root.$off('clearOtherActiveRow', this.clearOtherActiveRow)
  },
  mounted () {
    this.$refs.soilGrid && this.$refs.soilGrid.refreshList({
      BSNM: this.searchForm.BSNM,
      ADDVCD: this.searchForm.ADDVCD.length ? this.searchForm.ADDVCD[this.searchForm.ADDVCD.length - 1] : '130100'
    })
    this.setChartOption()
  },
  methods: {
    sqDefaultQueryParamsProcessor (params) {
      params.pageNum = 1
      params.pageSize = 50
      const tempMethodParams = JSON.parse(params.methodParams)
      const filterParam = {}
      tempMethodParams.columnFilterParam.forEach(ele => {
        filterParam[ele.field] = ele.conditions[0].value ? ele.conditions[0].value : ele.conditions[1].value
      })
      const methodParams = {
        BSNM: this.searchForm.BSNM,
        ADDVCD: this.searchForm.ADDVCD.length ? this.searchForm.ADDVCD[this.searchForm.ADDVCD.length - 1] : '130000',
        ...filterParam
      }
      params.methodParams = JSON.stringify(methodParams)
      return params
    },
    afterQuery (params) {
      this.sqTotal = params.total
      return params.rows ?? []
    },
    async setChartOption () {
      const { data } = await this.$request.post('ysjc/jsc/selectStationCount', {
        BSNM: this.searchForm.BSNM,
        STTP: this.searchForm.STTP,
        // 默认河北省
        ADDVCD: this.searchForm.ADDVCD.length ? this.searchForm.ADDVCD[this.searchForm.ADDVCD.length - 1] : '130000',
        STCD_TYPE: 'SQ'
      })
      const result = getBarOption({
        yAxisName: '个',
        xAxis: data.map(r => r.xzqmc),
        series: [
          {
            name: '站点个数',
            type: 'bar',
            color: ['#18395d00', '#047DF3'],
            data: data.map(r => {
              return {
                ...r,
                value: r.num
              }
            })
          }
        ]
      })
      result.series[0].itemStyle.borderRadius = [maxBarWidth, maxBarWidth, 0, 0]
      result.series[0].label = {
        show: true,
        position: 'top',
        fontSize: '14px',
        color: '#fff'
      }
      result.xAxis.axisLabel.color = '#C4CBD9'
      result.yAxis.axisLabel.color = '#C4CBD9'
      result.xAxis.axisLine = {
        show: true,
        lineStyle: {
          color: 'rgba(233,237,240,0.1)'
        }
      }
      result.xAxis.axisLabel.rotate = 40
      result.xAxis.axisLabel.interval = 0
      result.yAxis.splitLine.show = false
      result.yAxis.axisLine = {
        show: true,
        lineStyle: {
          color: 'rgba(233,237,240,0.1)'
        }
      }
      result.yAxis.nameTextStyle = {
        color: '#C4CBD9',
        fontSize: '14px',
        padding: [0, 0, 0, -20]
      }
      if (!data.length) {
        result.grid.left = 20
      }
      result.grid.bottom = 2
      result.tooltip.appendToBody = true
      this.chartOption = result
    },
    async currentChange ({ row }) {
      this.$root.$emit('selectTableStation', { coordinate: [row.LGTD, row.LTTD], row, layerId: 'ysqxx_SQ' })
    },
    changeLayerVisible (layId) {
      const visible = this.visibleLayerId !== layId
      this.visibleLayerId === layId ? this.$store.commit('ysqxx/setVisibleLayerId', '') : this.$store.commit('ysqxx/setVisibleLayerId', layId)
      this.$emit('changeLayerVisible', layId, visible)
    },
    clearOtherActiveRow (layerId) {
      nextTick(() => {
        if (layerId !== this.layerId) {
          this.$refs.soilGrid.$children[0].clearCurrentRow()
        }
      })
    },
    handleClickChart (data) {
      console.log({ data }, this.searchForm)
      nextTick(() => {
        this.$refs.sqModal.openModal(
          { params: { ...this.searchForm }, chartData: data.data, layId: this.layerId }
        )
      })
    }
  }
}
</script>
